<template>
	<!-- #ifndef APP-PLUS -->
	<view :class="'head ' + bgColor" :style="'height:' + (menuButtonInfo.top + menuButtonInfo.height + 8) + 'px'">
		<view class="fix-wrap" :style="'height:' + (menuButtonInfo.top + menuButtonInfo.height + 8) + 'px'">
			<view class="status-bar" :style="'height:' + menuButtonInfo.top + 'px'"></view>
			<view class="content" :style="'top:' + menuButtonInfo.top + 'px;height:' + menuButtonInfo.height + 'px'">
				<slot name="header">
					<!-- <template>
				<navigator open-type="navigateBack" delta="1" hover-class="none" class="btn iconfont f-wb">&#xe650;</navigator> 
				<view class="title">首页</view>
				</template>
				<template>
					<view class="navigation-fix-btn">
						<navigator open-type="navigateBack" delta="1" hover-class="none" class="back-btn iconfont f-s38">&#xe621;</navigator>
						<view class="line"></view>
						<navigator url="/pages/index/index" open-type="redirect" hover-class="none" class="home-btn iconfont f-s36">&#xe61f;</navigator>
					</view>
				</template>
				<view class="hide-wrap" :style="'height:'+(menuButtonInfo.top+menuButtonInfo.height+8)+'px'">
					<view class="fix-wrap" :style="'top:'+menuButtonInfo.top+'px'">
						<view class="title split">套餐1</view>
					</view>
				</view>
				 -->
				</slot>
			</view>
		</view>
	</view>
	<!-- #endif -->

	<!-- #ifdef APP-PLUS -->
	<view :class="'head ' + bgColor">
		<view class="content-app"><slot name="header"></slot></view>
	</view>
	<!-- #endif -->
</template>

<script>
export default {
	name: 'demo',
	data() {
		return {
			menuButtonInfo: {},
			title: '页面内容'
		};
	},
	props: {
		bgColor: {
			type: String
		}
	},
	onReady() {
		this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	},
	onLoad() {},
	methods: {},
	computed: {},
	components: {}
};
</script>

<style lang="less">
.status-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}
.bg-main {
	.fix-wrap {
		// background:radial-gradient(circle at left top, #04a760 10%, #1db774, #38c789);
		background: radial-gradient(circle at left bottom, #0099ff 0, #3eaef8, #9dd4f9);
	}
}
.bg-white {
	.fix-wrap {
		background: #fff;
	}
}
.head {
	.fix-wrap {
		left: 0;
		top: 0;
		width: 100%;
	}
	.content {
		position: fixed;
		width: 100%;
		left: 0;
		z-index: 100;
	}
}

/* #ifdef APP-PLUS */
.status-bar {
	background-color: #0099ff;
	height: var(--status-bar-height);
	// height: 55rpx;
}
.head {
	padding-top:  var(--status-bar-height);
}
/* #endif */
</style>
